<template>
  <UserLayout :active-index="'2'" :active-menu="'tenant-center'">
    <div class="checkout-results-content">
      <div class="checkout-results-header">
        <el-button type="primary" @click="goBack" class="back-btn">
          <el-icon><ArrowLeft /></el-icon>
          返回租客中心
        </el-button>
        <h2>退租申请结果</h2>
        <p>查看您的退租申请处理结果</p>
      </div>

          <div class="checkout-results-content">
            <el-table :data="checkoutResults" style="width: 100%">
              <el-table-column prop="houseTitle" label="房源信息" width="200" />
              <el-table-column prop="checkoutType" label="退租类型" width="120">
                <template #default="scope">
                  <el-tag :type="scope.row.checkoutType === 'early' ? 'danger' : 'info'">
                    {{ scope.row.checkoutType === 'early' ? '提前退租' : '正常到期' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="reason" label="退租理由" width="250" />
              <el-table-column prop="expectedDate" label="期望退租日期" width="150" />
              <el-table-column prop="status" label="处理状态" width="100">
                <template #default="scope">
                  <el-tag :type="getStatusType(scope.row.status)">
                    {{ getStatusText(scope.row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="submitTime" label="提交时间" width="150" />
              <el-table-column prop="processTime" label="处理时间" width="150" />
              <el-table-column label="操作" width="120">
                <template #default="scope">
                  <el-button size="small" @click="viewDetails(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
      </div>

    <!-- 退租申请详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="退租申请详情" width="600px">
      <div v-if="selectedResult">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="房源信息">{{ selectedResult.houseTitle }}</el-descriptions-item>
          <el-descriptions-item label="退租类型">
            <el-tag :type="selectedResult.checkoutType === 'early' ? 'danger' : 'info'">
              {{ selectedResult.checkoutType === 'early' ? '提前退租' : '正常到期' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="退租理由">{{ selectedResult.reason }}</el-descriptions-item>
          <el-descriptions-item label="期望退租日期">{{ selectedResult.expectedDate }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ selectedResult.contactPhone }}</el-descriptions-item>
          <el-descriptions-item label="紧急联系人">{{ selectedResult.emergencyContact }}</el-descriptions-item>
          <el-descriptions-item label="备注说明">{{ selectedResult.remarks || '无' }}</el-descriptions-item>
          <el-descriptions-item label="处理状态">
            <el-tag :type="getStatusType(selectedResult.status)">
              {{ getStatusText(selectedResult.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ selectedResult.submitTime }}</el-descriptions-item>
          <el-descriptions-item label="处理时间">{{ selectedResult.processTime || '待处理' }}</el-descriptions-item>
          <el-descriptions-item v-if="selectedResult.rejectReason" label="拒绝理由">
            {{ selectedResult.rejectReason }}
          </el-descriptions-item>
          <el-descriptions-item v-if="selectedResult.penalty" label="违约金">
            ¥{{ selectedResult.penalty }}
          </el-descriptions-item>
          <el-descriptions-item v-if="selectedResult.depositReturn" label="押金退还">
            ¥{{ selectedResult.depositReturn }}
          </el-descriptions-item>
          <el-descriptions-item v-if="selectedResult.remarks" label="备注">
            {{ selectedResult.remarks }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </UserLayout>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import UserLayout from '@/components/layout/UserLayout.vue'
import { ArrowLeft } from '@element-plus/icons-vue'

const router = useRouter()
const dialogVisible = ref(false)
const selectedResult = ref(null)

// 返回租客中心
const goBack = () => {
  router.push('/rental/tenant')
}

// 退租申请结果列表
const checkoutResults = ref([
  {
    id: 1,
    houseTitle: '精致一居室公寓',
    checkoutType: 'early',
    reason: '工作调动，需要搬到其他城市',
    expectedDate: '2024-02-15',
    contactPhone: '13800138000',
    emergencyContact: '李四 13900139000',
    remarks: '希望尽快处理退租手续',
    status: 'approved',
    submitTime: '2024-01-15 10:30',
    processTime: '2024-01-15 11:00',
    penalty: 1000,
    depositReturn: 6000,
    remarks: '已通过退租申请，请按时搬离'
  },
  {
    id: 2,
    houseTitle: '豪华两居室',
    checkoutType: 'normal',
    reason: '租期到期，不再续租',
    expectedDate: '2024-03-01',
    contactPhone: '13700137000',
    emergencyContact: '赵六 13600136000',
    remarks: '',
    status: 'pending',
    submitTime: '2024-01-16 08:30',
    processTime: null,
    penalty: 0,
    depositReturn: null,
    remarks: null
  },
  {
    id: 3,
    houseTitle: '温馨三居室',
    checkoutType: 'early',
    reason: '家庭原因，需要提前退租',
    expectedDate: '2024-01-30',
    contactPhone: '13500135000',
    emergencyContact: '周八 13400134000',
    remarks: '请尽快安排退租检查',
    status: 'rejected',
    submitTime: '2024-01-14 15:30',
    processTime: '2024-01-14 16:00',
    rejectReason: '提前退租需要承担违约金，且当前租期未满',
    penalty: 0,
    depositReturn: 0,
    remarks: '建议租期到期后再申请退租'
  }
])

// 查看详情
const viewDetails = (result) => {
  selectedResult.value = result
  dialogVisible.value = true
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    'pending': 'warning',
    'approved': 'success',
    'rejected': 'danger',
    'processing': 'primary',
    'completed': 'info'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'pending': '待处理',
    'approved': '已通过',
    'rejected': '已拒绝',
    'processing': '处理中',
    'completed': '已完成'
  }
  return statusMap[status] || '未知'
}
</script>

<style scoped>
.checkout-results-container {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

.checkout-results-wrapper {
  width: 100%;
  height: 100vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  padding: 20px;
}

.checkout-results-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.checkout-results-header h2 {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.checkout-results-header p {
  color: #7f8c8d;
  font-size: 16px;
  margin: 0;
}

.back-btn {
  position: absolute;
  top: 0;
  left: 0;
}

.checkout-results-content {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .checkout-results-content {
    overflow-x: auto;
  }
}
</style>